<template>
  <div class="login_box">
    <div class="account_box" flex="dir:top main:center cross:center">
      <span class="login_span" flex-box="0">欢迎登录</span>
      <el-form class="form" :model="form">
        <el-form-item>
          <el-input :prefix-icon="Lock" v-model="form.username" placeholder="请输入角色">
            <el-icon class>
              <Lock />
            </el-icon>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            :prefix-icon="User"
            class="input_form"
            v-model="form.account"
            placeholder="请输入登录账号"
            clearable
          >
            <el-icon class>
              <User />
            </el-icon>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-input
            :prefix-icon="Lock"
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            show-password
            class="input_form"
          >
            <el-icon class>
              <Lock />
            </el-icon>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button @click="submit" class="login_btn">登录</el-button>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { Lock, User } from "@element-plus/icons-vue"; // svg图标
// export default {
// setup() {
const router = useRouter();
const form = reactive({
  account: "admin",
  password: "admin",
});
const checkForm = () => {
  //校验输入框
  return new Promise((resolve) => {
    if (form.account === "") {
      ElMessage.warning({
        message: "用户名不能为空",
        type: "warning",
      });
      return;
    }
    if (form.password === "") {
      ElMessage.warning({
        message: "密码不能为空",
        type: "warning",
      });
      return;
    }
    resolve(true);
  });
};
const store = useStore();
const submit = () => {
  checkForm().then(async () => {
    let params = {
      account: form.account,
      password: form.password,
    };
    store.dispatch("login/login", params).then((res) => {
      if (res.code == 200) {
        ElMessage.success(res.message);
        router.push("/");
      }
    });
  });
};

// return {
//   form,
//   submit,
// };
// },
// };
</script>

<style lang="scss" scoped>
.input_form {
  width: 420px;
  // height: 50px;
  background: #ffffff;
  border: 1px solid #5689d6;
  box-shadow: 0px 2px 10px 0px rgba(8, 61, 120, 0.1);
  border-radius: 4px;
}
.login_box {
  background: url("@/assets/img/background_img.png") no-repeat 100%;
  width: 100%;
  height: 100%;
  background-size: cover;
  position: relative;
  .account_box {
    width: 510px;
    height: 450px;
    background: #ffffff;
    box-shadow: 0px 12px 24px 0px rgba(8, 61, 120, 0.1);
    border-radius: 8px;
    position: absolute;
    right: 20%;
    top: 30%;
  }
  .login_span {
    width: 152px;
    height: 37px;
    font-size: 38px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 38px;
    margin-bottom: 63px;
  }
  .login_btn {
    width: 420px;
    height: 50px;
    background: #f4535d;
    box-shadow: 0px 2px 10px 0px rgba(8, 61, 120, 0.2);
    border-radius: 4px;
  }
}
</style>
<style lang="scss">
.login_box {
  .el-input__inner {
    height: 50px;
  }
}
</style>